// components/changeColor/changeColor.js
Component({
  options:{
    // 纯数据字段
    pureDataPattern:/^_/
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:'0,0,0'
  },
  observers:{
    // 'rgb.r,rgb.g,rgb.b':function(r,g,b){
    //   this.setData({
    //     fullColor:`${r},${g},${b}`
    //   })
    // }
     '_rgb.**':function(obj){
        this.setData({
          fullColor:`${obj.r},${obj.g},${obj.b}`
        })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeR(){
      this.setData({
        '_rgb.r': this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
      })
    },
    Rchange(){
      this.setData({
        '_rgb.r': this.data._rgb.r - 5 < 0 ? 0 : this.data._rgb.r - 5
      })
    },
    changeG(){
      this.setData({
        '_rgb.g': this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
      })
    },
    Gchange(){
      this.setData({
        '_rgb.g': this.data._rgb.g - 5 < 0 ? 0 : this.data._rgb.g - 5
      })
    },
    changeB(){
      this.setData({
        '_rgb.b': this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5
      })
    },
    Bchange(){
      this.setData({
        '_rgb.b': this.data._rgb.b - 5 < 0 ? 0 : this.data._rgb.b - 5
      })
    },
    _randomColor(){
      this.setData({
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  },
  lifetimes:{
    attached(){

    },
    detached(){

    }
  },
  pageLifetimes:{
    show:function(){
      this._randomColor()
    },
    hide:function(){

    },
    resize:function(){

    }
  }
})
